<template>
  <div class="order-status-check">
    <createTop firstMenu="商品管理" secondMenu="商品出库" title="出库详情"></createTop>

    <el-card class="one">

        <el-button
        size="mini"
        plain
        type="success"
        class="xiadan"
        @click="confirm">确认出货</el-button>

      <div class="check-title">
        <div class="status" :class="status==='已作废'?'zuofei-color':''">{{status}}</div>
        <div class="top">
          <div class="i"><span>订单号: </span>{{iRes.order}}</div>
          <div class="i"><span>销售员: </span>{{iRes.sell_username}}</div>
          <div class="i"><span>交货日期: </span>{{iRes.date}}</div>
          <div class="i"><span>制单人: </span>{{iRes.make_username}}</div>
        </div>
      </div>
        <el-table
        :data="tableData"
        style="width: 100%"
        :border="true"
        :fit="true"
        :stripe="true"
        show-summary
        size="mini"
        align="center">
        <el-table-column
        type="index"
          label=" "
          min-width="100"
          align="center">
        </el-table-column>

        <el-table-column
          prop="goods_number"
          label="商品编号"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="goods_model"
          label="商品分类"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="goods_name"
          label="商品名称"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="class_name"
          label="型号"
          min-width="110"
          align="center">
        </el-table-column>

        <el-table-column
          prop="count"
          label="数量"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="price"
          label="单价"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="xiaoji_price"
          label="小计"
          min-width="120"
          align="center">
        </el-table-column>
        
        <el-table-column
          prop="order_number"
          label="生产单号"
          min-width="120"
          align="center">
        </el-table-column>

      </el-table>
      <div class="otherPrice">
        其他费用 : {{iRes.other_price?iRes.other_price:0}}
      </div>

      <div class="allPrice">
        应付金额 :<span class="red-word"> {{iRes.all_price}}</span>
      </div>
    </el-card>

      <el-card shadow="always">
        <div slot="header" class="card-title">
          <span>出库信息</span>
        </div>
        <div class="content">
          <div class="se">
            <div class="content-title">制单人</div>
            <el-input :style="{'width':'350px'}" disabled placeholder="读取账号"></el-input>
          </div>

          <div class="se">
            <div class="content-title">出库单号  <span class="red-icon">※</span> </div>
            <el-input :style="{'width':'350px'}" disabled placeholder="自动填充"></el-input>
          </div>
        </div>

        <div class="content">
          <div class="se">
            <div class="content-title">出库日期 <span class="red-icon">※</span></div>
            <el-date-picker
              v-model="date"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd">
            </el-date-picker>

            <div class="content-title">出库类型 </div>
            <el-input :style="{'width':'350px'}" disabled placeholder="订货配单"></el-input>

            <div class="content-title">经办人 </div>
            <el-input :style="{'width':'350px'}" v-model="doName" placeholder="输入经办人姓名"></el-input>
          </div>

          <div class="s">
            <div class="content-title">出库备注 </div>
            <el-input :style="{'width':'350px'}" v-model="remark" type="textarea" :rows="5" resize="none" placeholder="输入适当的备注方便管理"></el-input>
          </div>
        </div>
      </el-card>

    <el-card :style="{'marginTop':'15px'}">
      <div class="bottom">
        <div>
         <span :style="{'marginRight':'0'}">备注：</span><span :style="{'fontWeight':'500'}">{{iRes.remarks}}</span> 
        </div>
        <!-- <div class="remark" v-if="iRes.remarks">{{iRes.remarks}}</div> -->

        <div class="big-word">收货信息</div> 
        <div class="date">
          <div>
            <span>客户名称：{{customerInfo.nickname}}</span>
            <span>收货人：{{customerInfo.name}}</span>
            <span>联系电话：{{customerInfo.tel}}</span>
          </div>
          <div>
            <span>收货地址：{{customerInfo.address}}</span>
          </div>
        </div>
        <div class="big-word">发票信息</div>
          <div class="date">
            <div>
            <span>发票抬头：{{customerInfo.invoice}}</span>
            <span>发票内容：{{customerInfo.invoice_content}}</span>
            <span>纳税人识别号：{{customerInfo.taxpayer_number}}</span>
            </div>
            <div>
              <span>地址：{{customerInfo.invoice_address}}</span>
              <span>电话：{{customerInfo.tel}}</span>
            </div>
            <div>
              <span>开户名称：{{customerInfo.account_name}}</span>
              <span>开户银行：{{customerInfo.bank}}</span>
              <span>银行账号：{{customerInfo.account}}</span>
            </div>
          </div>
      </div>
    </el-card>

    <el-dialog class="zuofei-dia" v-if="zuofei" title="提示" width='500px' center :visible="true" @close="delClose">
      <div :style="{'textAlign':'center'}">确定将已出货订单{{iRes.order}}作废吗?作废后不可回建。</div>
      <div :style="{'textAlign':'center','color':'red'}">如有关联的出库单将一并作废,相应的库存将退回原有仓库。</div>
      <div :style="{'textAlign':'center'}">如确认,请填写作废原因。</div>
      <el-input :style="{'width':'350px','margin-left':'45px'}" v-model="zuofeiReson" type="textarea" :rows="5" resize="none" placeholder="输入作废原因"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delClose">取 消</el-button>
          <el-button type="primary" @click="delConfirm">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog class="zuofei-dia" v-if="chuhuo" title="提示" width='350px' center :visible="true" @close="chuhuo=false">
      <div :style="{'textAlign':'center'}">确认出货?</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="chuhuo=false">取 消</el-button>
          <el-button type="primary" @click="chuhuoConfirm">确 定</el-button>
        </span>
    </el-dialog>

    <el-button
    size="small"
    type="primary"
    class="xiadan-btn"
    @click="confirm">确认出货</el-button>

  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';
import { Watch } from 'vue-property-decorator';
import tableList from '@/tables/produceInCheckTable.vue';
import AjaxResquest from '@/api/apiRequest';

@Component({
  components: {
    createTop,
    tableList
  }
})
export default class OrderStatusCheck extends Vue {
  listRes!: AjaxResquest;
  confirmRes!: AjaxResquest;
  zuofeiRes!: AjaxResquest;

  tableData: any[] = [];
  iRes = {};
  status: string = '';
  customerInfo: any = {};
  id!: string;

  zuofei: boolean = false;
  zuofeiReson: string = '';

  doName: string = '';
  date: string = '';
  remark: string = '';
  chuhuo: boolean = false;
  // 商品分类
  mounted() {
    // TODO
    console.log(this.$route.query);
    this.status = this.$route.query.status;
    this.id = this.$route.query.id;
    this.listRes = new AjaxResquest('/order/orderOut');
    this.confirmRes = new AjaxResquest('/order/orderOutToDo');
    this.zuofeiRes = new AjaxResquest('/order/orderToVoid');
    this.getList();
  }
  getList(): void {
    this.listRes
      .getFunction({ orderInfoId: this.$route.query.id })
      .then((res:any) => {
        if (res.data.code === 1) {
          let temp = res.data.data.types.goods;
          temp.map((i: any) => {
            if (i.remarks === null) {
              return (i.remarks = '');
            }
          });
          console.log(temp);

          this.tableData = temp;
          this.iRes = res.data.data.types.orderInfo;
          this.customerInfo = res.data.data.types.customersInfo;
          // this.totalCount = res.data.data.allCount;
        }
      });
  }
  confirm() {
    this.chuhuo = true;
  }
  chuhuoConfirm() {
    if (this.date === '') {
      this.$message.error('出货日期不能为空!');
      return;
    }
    let tempArray: any[] = [];
    this.tableData.map((i: any) => {
      let m = { goods_id: i.goods_id, number: '-' + i.count };
      tempArray.push(m);
    });
    let data = {
      goodsInfo: JSON.stringify(tempArray),
      orderInfoId: this.$route.query.id,
      date: this.date,
      doName: this.doName,
      remarks: this.remark,
      state: '订货配单'
    };
    this.confirmRes.getFunction(data).then((res: any) => {
      this.chuhuo = false;
      if (res.data.code === 1) {
        this.$to('order');
      }
    });
  }
  zuofeiClick() {
    this.zuofei = true;
  }
  delClose() {
    this.zuofei = false;
  }
  delConfirm() {
    let data = {
      orderInfoId: this.id,
      reason: this.zuofeiReson
    };
    this.zuofeiRes.getFunction(data).then((res: any) => {
      if (res.data.code === 1) {
        console.log(res.data.data);
        this.$to('order');
      }
    });
  }
  daochu() {}
}
</script>
<style lang="less">
.order-status-check {
  position: relative;
  height: 100%;
  padding: 15px;
  // display: flex;
  flex-direction: column;
  // z-index: 101;
  box-sizing: border-box;
  text-align: left;
  .el-card {
    overflow-y: auto;
  }
  .status {
    font-size: 24px;
    color: red;
  }
  .check-title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
  }
  .el-checkbox {
    margin: 2px 0 !important;
    width: 130px;
  }
  .radio {
    margin-top: 10px;
  }
  .top {
    display: flex;
    padding-left: 40px;
    // margin-bottom: 10px;
    div {
      min-width: 140px;
      margin-right: 20px;
    }
    span {
      font-weight: 600;
    }
  }
  .bottom {
    // display: flex;
    padding-left: 20px;
    // margin-top: 10px;
    margin-top: 15px;
    div {
      min-width: 140px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
    span {
      display: inline-block;
      margin-right: 15px;
      font-weight: 600;
    }
    .date {
      font-weight: 500;
      font-size: 14px;
      color: #777;
    }
  }
  .one {
    position: relative;
    margin-bottom: 15px;
  }
  .xiadan {
    position: absolute;
    right: 35px;
    top: 15px;
  }
  .big-word {
    font-weight: 600;
  }
  .otherPrice {
    margin-top: 10px;
    width: 100%;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .allPrice {
    margin-top: 10px;
    width: 100%;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    font-size: 16px;
    .red-word {
      color: red;
    }
  }
  .xiadan-btn {
    margin-top: 15px;
  }
  .zuofei-btn {
    position: absolute;
    right: 160px;
    top: 15px;
  }
  .zuofei-dia {
    z-index: 300000;
    .el-dialog {
      z-index: 2025;
    }
  }
  .daochu-btn {
    position: absolute;
    right: 90px;
    top: 15px;
  }
  .zuofei-color {
    color: blue;
  }
  .content {
    font-size: 16px;
    background-color: #fff;
    border-radius: 4px;
    .content-title {
      height: 40px;
      margin-top: 20px;
      line-height: 2;
      text-align: left;
    }
    .short-input {
      width: 100%;
      width: 240px;
      margin-right: 10px;
    }
    .el-upload-list__item {
      width: 350px;
    }
    .el-textarea {
      margin-bottom: 30px;
    }
  }
}
</style>
